import React from "react";
import { Button, Input, Form, Message } from "@arco-design/web-react";
import { IconUser, IconLock } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';

const FormItem = Form.Item;
function LoginPage () {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  function onSubmit (values) {
    let { userName, password } = values
    if (userName === 'admin' && password === '123456') {
      Message.success('登录成功!')

      // 设置cookie,有效期为7天
      Cookies.set('token', 'lFdoQPIzLpv7VVPCXEtSWrrzKiMitYE7', { expires: 7 })

      // 登录成功后进行路由跳转
      navigate('/');

    } else {
      Message.error('账号或密码错误!')
    }
  }
  return (
    <div className="bg-[#dddddd] h-[100vh] flex justify-center items-center">
      <div className="login-container w-[500px] bg-white p-4 rounded">
        <h1 className="text-center">欢迎使用</h1>
        <Form
          form={form}
          onSubmit={onSubmit}
          wrapperCol={{ span: 24 }}
          className="p-2"
        >
          <FormItem field="userName" label="" rules={[{ required: true, message: '请输入账号' }]}>
            <Input placeholder="请输入用户名" prefix={<IconUser />} />
          </FormItem>
          <FormItem field="password" label="" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="请输入密码" prefix={<IconLock />} />
          </FormItem>
          <FormItem>
            <Button type="primary" long htmlType='submit'>
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
  );
}

export default LoginPage;
